Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to React Native v63. #4420

Merged
merged 7 commits into from
Jan 22, 2021
Merged

Upgrade to React Native v63. #4420

merged 7 commits into from
Jan 22, 2021

Conversation

chrisbobbe
Copy link
Contributor

@chrisbobbe chrisbobbe commented Jan 20, 2021

Following #4296, #4318, #4319, #4320, #4321, #4322, and #4414, complete the RN v0.63 upgrade! 🎉

If, during testing, you encounter an error during the postinstall script like either of the errors described in #4420 (comment), try running rm -rf ios/Pods and rerunning yarn; no further action should be necessary. This has worked for me, in testing, when hopping between before and after the upgrade. (As described in that comment, I've already committed the result of running a pod update command in the upgrade commit. That seems to have fixed something that wouldn't be fixed by merely removing ios/Pods.)

If, when testing on Android, you get an instant crash, try removing android/.gradle and running ./gradlew clean from the android directory, as recommended in a few places in our build-run doc.

Fixes: #4245
Fixes: #4365

@chrisbobbe
Copy link
Contributor Author

chrisbobbe commented Jan 20, 2021

These are the RN commits that touch the RN template app that are in v0.63.4 but are not in v0.62.2. They're ordered from first to last (oldest to newest).

I.e., they're the commits in the output of git log --oneline --reverse v0.62.2..v0.63.4 -- template, when I run it in a clone of the facebook/react-native repo.

Along with whether, how, and when we propagate the changes to our app.

We shouldn't forget to update this, if necessary, to follow any changes made during code review and merge.

RN commit When done Comment
facebook/react-native@e1e081b00 Update Android Gradle plugin to 3.5.3 (#27462) #4320
facebook/react-native@f11b4895d Edits to flipper pods comments (#27485) 9a144c5 This was backported to v0.62 in facebook/react-native@8f954b365, so we took it in that upgrade. See also #4322.
facebook/react-native@aa7845734 v0.114.0 Upgrade commit
facebook/react-native@68bf0e32e Fix RNTester integration with Flipper (#27482) f2e6119 This was backported to v0.62 in facebook/react-native@3c3b4cf57, so we took it in that upgrade. See also #4322.
facebook/react-native@7980615d3 remove xcshareddata from gitignore (#27563) N/A We never took the addition of this line from facebook/react-native@d57cdac62; it was done in error. (The removal was backported to v0.61 in facebook/react-native@3aaebe60c, and to v0.62 in facebook/react-native@b0eddefcb, so we would have gotten it in one of those upgrades anyway.) See also my comment on facebook/react-native@a715decd2 in this table.
facebook/react-native@98ebc1ea2 Adjust HelloWorld-tvOSTests/Info.plist CFBundleIdentifier to use PR ODUCT_BUNDLE_IDENTIFIER (#27601) N/A We don't have a ZulipMobile-tvOSTests/Info.plist because we don't do anything with tvOS.
facebook/react-native@87370c4c0 Remove use of inexact-spread Flow lint #4318
facebook/react-native@674b59180 iOS: Deprecate iOS 9 / tvOS 9 SDK support N/A We've already got our iOS deployment target at 11 (we went from 10 to 11 in c953bc3).
facebook/react-native@829a2237d iOS/tvOS 9.0 ==> 10.0 in .xcodeproj N/A We've already got our iOS deployment target at 11 (we went from 10 to 11 in c953bc3).
facebook/react-native@15ce226f5 v0.115 in xplat/js Upgrade commit
facebook/react-native@159624d90 React Native sync for revisions 6cff70a...19f6fe1 Upgrade commit We don't take the react-test-renderer upgrade because we don't use that package.
facebook/react-native@aa0ef1533 Applied missing changes from bumping Gradle wrapper to 6.0.1 (#27639) #4319
facebook/react-native@c40988cc2 Deploy Flow v0.116 to xplat Upgrade commit
facebook/react-native@a89a55353 Update Gradle wrapper to 6.1 (#27800) #4319
facebook/react-native@edcbfb982 Bump Android build-tools to 29.0.2, compileSdk to 29 N/A Our compileSdkVersion and targetSdkVersion are already on 29, so no need to change those. We don't need to specify a buildToolsVersion; see e0b0b97 and discussion.
facebook/react-native@9c3fa5733 Remove FB copyright notices from iOS template (#27725) cc51ea2 This was backported to v0.62 in facebook/react-native@6a10d5dfd, so we took it in that upgrade.
facebook/react-native@7bc2b9179 Deploy Flow v0.117.0 to xplat Upgrade commit
facebook/react-native@947a5593e Update Gradle Wrapper to 6.1.1 (#27865) #4319
facebook/react-native@939df8a01 Upgrade Flipper version (#27837) 2fc3bc1 This was backported to v0.62 in facebook/react-native@e7bfa1fc2, so we took it in that upgrade. See also #4322.
facebook/react-native@52cd9cd6f initalizeFlipper should be set in template app by default (#27569) 7c72715 This was backported to v0.62 in facebook/react-native@05f5cb534, so we took it in that upgrade. See also #4322.
facebook/react-native@8f93dedc6 Remove empty Swift file for Flipper (#27922) 9a144c5 This was backported to v0.62 in facebook/react-native@e3218a0d9, so we took it in that upgrade. See also #4322.
facebook/react-native@82e823933 Upgrade all dependencies in package.json template (#27928) #4321 See #4321 for why we didn't take all of this commit.
facebook/react-native@2a0c4c878 Remove types-first from flowconfig template N/A A clean reversion of facebook/react-native@d9b84450a. We didn't take react-native@d9b84450a because its clean reversion (this commit) was backported to v0.62 in facebook/react-native@cae662bfe.
facebook/react-native@82165673f chore: add eslint back to template (#27983) N/A We're happy with our scripts in package.json, so we don't take this.
facebook/react-native@cd194b833 Deploy Flow v0.118 Upgrade commit
facebook/react-native@a35efb940 Use autolink script in template on iOS (#27984) Upgrade commit Mentioned in #4322, this is when the RN-related but non-Flipper-related code was moved to a function defined by React Native (use_react_native!). We're now expected to call this function instead of copy a bunch of stuff to our own Podfile (which is nice!). I haven't yet been moved to propagate all the v0.62 -> v0.63 changes to RN's script over to the code that runs in our Podfile, so that we could make the switch to the RN call as an NFC commit after the upgrade commit. (See my comment on facebook/react-native@619d5d60d in this table, where I said I'd done so for the Flipper-related code.)
facebook/react-native@4bb0b4f20 Remove pickFirst arguments (#27964) #4322
facebook/react-native@29d3dfbd1 add Detox integrations to Android RNTester app N/A We have these lines already (but with a different value for the Kotlin version) because we're already using Kotlin.
facebook/react-native@619d5d60d Smoothen Flipper iOS integration (#28044) After the upgrade commit. Partial (some has already been done). As I mentioned in #4322, most of this was backported to RN v0.62, in facebook/react-native@b4d1fcfb2. We took the portion that was, in 9a144c5. What remains to do in this upgrade is, as I mentioned in #4322, "calling RN's code instead of duplicating it in our Podfile." On Greg's recommendation, I propagated all (not just most) of the v0.62 -> v0.63 changes to RN's script over to the code that runs in our Podfile. This means we can make the switch to the RN call as an NFC commit after the upgrade commit.
facebook/react-native@a1b14deb3 Add androidx.swiperefreshlayout to template build.gradle (#28071) d179e90 This was backported to v0.62 in facebook/react-native@99ef72cad, so we took it in that upgrade.
facebook/react-native@0e4bcaa29 Resolve localization warnings (#28046) 1ebd4d4 This was backported to v0.62 in facebook/react-native@ebb629d05, so we took it in that upgrade.
facebook/react-native@d4d8887b5 Update Gradle Wrapper to 6.2 (#28112) #4319
facebook/react-native@4118d7982 Rename autolinking-ios.rb script and bring RNTester and template in line. (#28077) Upgrade commit and after. The ../node_modules/react-native/scripts/{ autolink-ios -> react_native_pods } file rename here is why we use the react_native_pods name when we handle facebook/react-native@a35efb940 in the upgrade commit. The add_flipper_pods! -> use_flipper! rename here is why we use the use_flipper! name when we handle the remainder of facebook/react-native@619d5d60d, after the upgrade commit (see my comment at facebook/react-native@619d5d60d in this table for what "the remainder" means).
facebook/react-native@c0d8c1db9 Updating the URLs to point at new domain name reactnative.dev 2afbcf7
facebook/react-native@6ea963de6 @allow-large-files deploy 0.119 to xplat Upgrade commit
facebook/react-native@a715decd2 Add xcscheme files back in the template (#28198) N/A We never took facebook/react-native@3e4c5c09c, which removed these files in error. (This fix was backported to v0.62 in facebook/react-native@4efa3baf0 so we would have gotten it then anyway.)
facebook/react-native@80e6d672f UIViewController-based status bar management (#25919) N/A We don't take this; it's cleanly reverted (unclear why, though) in facebook/react-native@f4538e577.
facebook/react-native@f4538e577 Back out "UIViewController-based status bar management" N/A Cleanly reverts facebook/react-native@80e6d672f (unclear why, though), which we didn't take; ignore.
facebook/react-native@1beef1e18 deploy 120 to xplat Upgrade commit
facebook/react-native@db1225564 Upgrade Flipper Android to 0.33.1 (#28275) #4322
facebook/react-native@44ae0fea0 Re-sync with internal repository N/A We don't take this; it's cleanly reverted in facebook/react-native@067b7a836.
facebook/react-native@067b7a836 Revert "Merge pull request #28292 from hramos/fixup-T63861364-master" N/A Cleanly reverts facebook/react-native@44ae0fea0, which we didn't take; ignore.
facebook/react-native@07def5539 fbshipit-source-id: da15f69185e724eaf7d4bc78dbc61fcdcb3074d5 N/A No need to include; accidentally removes CRLF line endings. This is reverted in facebook/react-native@8988a073b (released RN v0.64-rc.0).
facebook/react-native@bac9e6959 React Native sync for revisions 241c446...b5c6dd2 Upgrade commit We don't take the react-test-renderer upgrade because we don't use that package.
facebook/react-native@9637d6214 Update React package Upgrade commit
facebook/react-native@6fe7cd88d Deploy Flow 0.121 to Xplat (#901) Upgrade commit
facebook/react-native@ad86a1830 chore: update lint config in template (#28443) N/A We don't use @react-native-community/eslint-config. We might eventually start to; see #4119. We don't take the metro-react-native-babel-preset upgrade because we're already on v0.63.0.
facebook/react-native@4a48b021d upgrade to flow 0.122.0 Upgrade commit
facebook/react-native@696fb5588 Update default Podfile to not depend on a path (#28572) Upgrade commit
facebook/react-native@7acd6672a chore: remove Kotlin version from the default template N/A We should leave these lines in because we use Kotlin; see discussion.
facebook/react-native@e2dd18d8b [0.63.0-rc.0] Bump version numbers Upgrade commit
facebook/react-native@87f5b8b79 Remove the post install step (#28651) N/A (tracked in #4322) We don't take this; it's cleanly reverted in facebook/react-native@574447a.
facebook/react-native@574447ae3 Revert D21064653: Remove the post install step N/A (tracked in #4322) Cleanly reverts facebook/react-native@87f5b8b, which we didn't take; ignore.
facebook/react-native@208bd0569 Bump @react-native-community/eslint-config in new app template N/A We don't use this. We might eventually start to; see #4119.
facebook/react-native@48413a443 [0.63.0-rc.1] Bump version numbers Upgrade commit
facebook/react-native@27ccc6019 Upgrade Flipper to 0.37.0 (#28545) f7005c5 and #4322 (271d9c4)
facebook/react-native@29639e7b9 Enable with CocoaPods :configuration (#28796) #4322
facebook/react-native@0225f180f Changed iOS LaunchScreen from xib to storyboard (#28239) 78a62b2
facebook/react-native@4f897336b [0.63.0] Bump version numbers Upgrade commit
facebook/react-native@ce0fd0a57 [0.63.1] Bump version numbers Upgrade commit
facebook/react-native@a642c3f26 Exclude okhttp from flipper dependency (#29260) #4322
facebook/react-native@3c9e5f147 [0.63.2] Bump version numbers Upgrade commit
facebook/react-native@66c8cd393 Update Flipper (#29787) f7005c5 and #4322 (271d9c4)
facebook/react-native@7100756bb [0.63.3] Bump version numbers Upgrade commit
facebook/react-native@27651720b [0.63.4] Bump version numbers Upgrade commit

@chrisbobbe
Copy link
Contributor Author

chrisbobbe commented Jan 20, 2021

This comment describes an issue that I ran into and solved with a simple command; the result is in the current revision.

On running yarn after updating the dependencies react-native, react, etc., in package.json, I got the following red error output, from the pod install step of our postinstall script:

[!] CocoaPods could not find compatible versions for pod "Folly":
  In snapshot (Podfile.lock):
    Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)

  In Podfile:
    FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`) was resolved to 0.63.4, which depends on
      Folly (= 2020.01.13.00)

    Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)

I then ran rm -rf ios/Pods and ran yarn again, and got the following:

[!] CocoaPods could not find compatible versions for pod "Folly":
  In snapshot (Podfile.lock):
    Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)

  In Podfile:
    Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)

It seems like you've changed the version of the dependency `Folly` and it differs from the version stored in `Pods/Local Podspecs`.
You should run `pod update Folly --no-repo-update` to apply changes made locally.

This second message matches the one reported in facebook/react-native#30015. The suggested solution there is to run the command recommended in the output itself, pod update Folly --no-repo-update. This seemed to work for a lot of people, and no one has yet responded to say it doesn't work or that it causes problems. There are also posts on other threads, like this post, reporting that this command removed a roadblock in someone's RN upgrade.

The command seems to work for us. I observed that the yarn command by itself (i.e., with postinstall giving one of the above errors) causes no change to ios/Podfile.lock. After running pod update Folly --no-repo-update (with or without having removed ios/Pods first), I see quite a lot of changes to ios/Podfile.lock. A quick skim through them suggests they're the ones we'd expect to see with this RN upgrade.

So, I ran and committed the result of pod update Folly --no-repo-update in the main upgrade commit (and left this comment explaining why).

chrisbobbe added a commit to chrisbobbe/zulip-mobile that referenced this pull request Jan 20, 2021
In this commit:

- Update "react-native", "react", and "flow-bin" in package.json.
  Run `pod update Folly --no-repo-update` to move past an error on
  the `pod install` step of the `postinstall` script [1]. After this
  step, the Podfile.lock file is much changed, as expected. There is
  also a change in the project.pbxproj file.

- Update .flowconfig with the new Flow version, and address one new
  warning by removing a `$FlowFixMe` that we shouldn't have needed
  in the first place. (Usually this part is much more complicated!)

- Update "jest-expo" in package.json, to oblige a peer-dependency
  constraint on "react".

- TODO: Do something about react-native-cameraroll.

- Make a change to the Podfile, according to
  facebook/react-native@a35efb940.

  - Instead of spelling out all the Pods from RN (all the
    non-Flipper-related Pods, that is -- we'll handle the Flipper
    ones in a later commit), call a function defined by React
    Native, `use_react_native!`, newly exposed in RN v0.63.

  - Since we're still using React-RCTPushNotification (pending the
    resolution of zulip#4163), take care to keep
    React-RCTPushNotification. It apparently hasn't yet been removed
    from React Native, but it understandably isn't handled by
    `use_react_native!`.

See the PR thread [2] for the list of RN commits affecting the
template app and how we've chosen to propagate the template-app
changes into our project.

See also the RN v0.62 -> v0.63 upgrade guide [3], which gives a
visual representation of the changes to the template app. It mostly
matches the changes we've made; important deviations should have
been explained in the commit list in the PR thread [4].

[1] See
    zulip#4420 (comment)
    for more details on this.

[2] zulip#4420 (comment)

[3] https://react-native-community.github.io/upgrade-helper/?from=0.62.2&to=0.63.4

[4] As always, the guide does show some changes that don't appear in
    the template app. I think this noise is an effect of how the
    guide is generated (with react-native-community/rn-diff-purge)
    and can safely be ignored. It's a diff between a fresh app
    created with `react-native init --version=$CURRENT` and a fresh
    app created with `react-native init --version=$NEXT`, for the
    selected values of `$CURRENT` and `$NEXT`. In particular:

    - I believe that some dependency version range changes in
      package.json, including for @babel/core and @babel/runtime,
      might be caused by different versions for those dependencies
      being available when the `react-native init` commands are run.

    - Some changes in ordering and unique ID values always seem to
      show up in the project.pbxproj file.

Fixes: zulip#4245
@gnprice
Copy link
Member

gnprice commented Jan 20, 2021

Thanks @chrisbobbe ! I'll look closer at this today.

  • We're still waiting for RN v0.63 support from react-native-cameraroll

If your PR there (or some alternative) isn't merged upstream when we're otherwise ready to merge this upgrade, we can always handle this by pointing to your PR commit. But the project does seem to be actively merging PRs, and I see you left a ping on the issue just today, so hopefully that state won't last long.

Copy link
Member

@gnprice gnprice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Thanks for all your work on this upgrade, and for the clear table above. A few comments below.

Comment on lines -351 to -354
// Should be fixed in RN v0.63 (#4245); see
// https://github.com/zulip/zulip-mobile/issues/4245#issuecomment-695104351.
// $FlowFixMe
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the `$FlowFixMe`s start getting flagged as "unused suppression
comments", remove them.

Strangely, `this.textInputRef.current` and friends are
`any(implicit)` after this.

Hmm -- that is concerning. And indeed if I go and change these method calls to nonsense names, I get no error.

I think this may ultimately all be down to bugs in Flow's special support for React. Both React$ElementRef, and React$AbstractComponent aka React.AbstractComponent, which is part of the TextInput type, are implemented by special logic within Flow. I suspect that that logic isn't fully working as intended.

If we're not going to get type-checking on these anyway, I think I'd rather have the fixmes there, so it's obvious looking at the code that it isn't type-checked and you need to be careful about the types by hand.

@@ -32,7 +32,7 @@ export default class InputWithClearButton extends PureComponent<Props, State> {
canBeCleared: false,
text: '',
};
textInputRef = React.createRef<typeof TextInput>();
textInputRef = React.createRef<React$ElementRef<typeof TextInput>>();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A similar change should also happen at Input in the type of its prop that we pass this to.

(Though maybe not now after all; see previous comment.)

pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/'
pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One change here is that this particular pod no longer gets included. The upstream function has this:

  unless production
    pod 'React-Core/DevSupport', :path => "#{prefix}/"
  end

and production defaults to false.

I'm not sure what that does. It sounds like something that's good to leave out in release builds, but we might miss in dev builds. But I guess if things still seem to work well in development, then we didn't need it?

Copy link
Contributor Author

@chrisbobbe chrisbobbe Jan 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since production defaults to false, and we don't take it away from the default (which we would do by passing an argument with our use_react_native! call in the Podfile), I think this pod is still included in all builds.

  unless false
    // This code will definitely run
  end

unless false is equivalent to if true, I think. Is that right?

Copy link
Contributor Author

@chrisbobbe chrisbobbe Jan 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've just changed it to unless true in node_modules and run pod install (via yarn), and I see a line with React-Core/DevSupport removed from Podfile.lock.

(The / says to look for DevSupport as a "subspec" of React-Core. I think all subspecs of React-Core would normally have been pulled in by the pod 'React-Core' line, above this conditional—but this isn't happening here because React-Core's podspec declares a "default subspec"; doc.)

Probably best to keep pulling in DevSupport for development, but I agree that it should be fine to exclude it in production builds. I've just tried doing a release build with it excluded, and it built with no errors and is so far running just fine on my iPhone 6s.

I'd be nice if React Native took the approach it took with use_flipper! in facebook/react-native@c72ecdb (see also our 61bda2a) toward use_react_native!. The "build configuration" (the thing we use at build time to say whether we're building for production or development) isn't known at pod install time, which is the time the Podfile is run. So I don't see a way we could pass a correct value for the production param that use_react_native! expects.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I don't see a way we could pass a correct value for the production param that use_react_native! expects.

Given this, it's possibly just fine to not do anything for now. Including React-Core/DevSupport in release builds is the status quo anyway.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unless false is equivalent to if true, I think. Is that right?

Ha, yes, I guess I misread that code 🙃

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I agree with all the above. This change is NFC -- we were always getting this pod, and we're still always getting it. And the appropriate thing would be for that function to do something like what use_flipper! does, and take a list of configurations for it to apply in.

(Or else have some other way of being conditioned on the configuration.)

chrisbobbe added a commit to chrisbobbe/zulip-mobile that referenced this pull request Jan 21, 2021
As noted in the code comments, one mistake we were making (not seen
until now) was passing the wrong type parameter to `React$Ref`; we
should be passing a `React$ElementRef` type [1].

When we do that, the existing `$FlowFixMe`s (the ones with comments
about RN v0.63) are marked as unused, as we'd expect. But
unfortunately, at that point, `.current` is typed as
`any(implicit)`, which we definitely don't want. And that doesn't
seem to get fixed by upgrading to RN v0.63, so, remove the comments
about that new version. Greg suggests this may be caused by bugs in
Flow's special support for React [2].

So, mention our new knowledge that we need to be using
`React$ElementRef`, but retain some fixmes and comments alerting us
to the fact that `.current` is untyped and that we need to be
careful about using it.

[1] zulip#4278 (comment)
[2] zulip#4420 (comment)
chrisbobbe added a commit to chrisbobbe/zulip-mobile that referenced this pull request Jan 21, 2021
In this commit:

- Update "react-native", "react", and "flow-bin" in package.json.
  Run `pod update Folly --no-repo-update` to move past an error on
  the `pod install` step of the `postinstall` script [1]. After this
  step, the Podfile.lock file is much changed, as expected. There is
  also a change in the project.pbxproj file.

- Update .flowconfig with the new Flow version, and address one new
  warning by removing a `$FlowFixMe` that we shouldn't have needed
  in the first place. (Usually this part is much more complicated!)

- Update "jest-expo" in package.json, to oblige a peer-dependency
  constraint on "react".

- TODO: Do something about react-native-cameraroll.

- Make a change to the Podfile, according to
  facebook/react-native@a35efb940.

  - Instead of spelling out all the Pods from RN (all the
    non-Flipper-related Pods, that is -- we'll handle the Flipper
    ones in a later commit), call a function defined by React
    Native, `use_react_native!`, newly exposed in RN v0.63.

  - Since we're still using React-RCTPushNotification (pending the
    resolution of zulip#4163), take care to keep
    React-RCTPushNotification. It apparently hasn't yet been removed
    from React Native, but it understandably isn't handled by
    `use_react_native!`.

See the PR thread [2] for the list of RN commits affecting the
template app and how we've chosen to propagate the template-app
changes into our project.

See also the RN v0.62 -> v0.63 upgrade guide [3], which gives a
visual representation of the changes to the template app. It mostly
matches the changes we've made; important deviations should have
been explained in the commit list in the PR thread [4].

[1] See
    zulip#4420 (comment)
    for more details on this.

[2] zulip#4420 (comment)

[3] https://react-native-community.github.io/upgrade-helper/?from=0.62.2&to=0.63.4

[4] As always, the guide does show some changes that don't appear in
    the template app. I think this noise is an effect of how the
    guide is generated (with react-native-community/rn-diff-purge)
    and can safely be ignored. It's a diff between a fresh app
    created with `react-native init --version=$CURRENT` and a fresh
    app created with `react-native init --version=$NEXT`, for the
    selected values of `$CURRENT` and `$NEXT`. In particular:

    - I believe that some dependency version range changes in
      package.json, including for @babel/core and @babel/runtime,
      might be caused by different versions for those dependencies
      being available when the `react-native init` commands are run.

    - Some changes in ordering and unique ID values always seem to
      show up in the project.pbxproj file.

Fixes: zulip#4245
@chrisbobbe
Copy link
Contributor Author

chrisbobbe commented Jan 21, 2021

Thanks for the review, @gnprice! I've just pushed a new revision that addresses #4420 (comment) and an additional type-checking thing that had slipped through the cracks. I've also responded to the point about React-Core/DevSupport, at #4420 (comment).

Next, I'll go ahead and try pointing to my PR commit for react-native-cameraroll, as you've suggested at #4420 (comment). I'm not 100% sure there isn't some kind of necessary building/packaging step that contributes to what we get from NPM; I'll find out soon enough. 🙂

@gnprice
Copy link
Member

gnprice commented Jan 21, 2021

All looks good, thanks! And that sounds like a good plan.

chrisbobbe added a commit to chrisbobbe/zulip-mobile that referenced this pull request Jan 21, 2021
As Greg suggests [1], point to the commit at the tip of my PR
react-native-cameraroll/react-native-cameraroll#264.

Once a version of @react-native-community/cameraroll with official
RN v0.63 support (including as declared in `peerDependencies`) is
released to NPM, we should go back to specifying a version range,
making sure that that range doesn't include versions before that
update.

We expect this will happen relatively soon; the project does seem to
be actively merging PRs, and I recently left a ping on the issue.
But we'd like to start using RN v0.63 in our project ASAP, so we use
this strategy in the meantime.

Sometimes packages have a crucial build/packaging step that gets
done as part of releasing a version to NPM. Such a step would likely
make it impossible to point to a commit on GitHub and have the
package still work. But I've verified that it does indeed work when
we point to the commit on GitHub, so there's no problem there.

[1] zulip#4420 (comment)
chrisbobbe added a commit to chrisbobbe/zulip-mobile that referenced this pull request Jan 21, 2021
In this commit:

- Update "react-native", "react", and "flow-bin" in package.json.
  Run `pod update Folly --no-repo-update` to move past an error on
  the `pod install` step of the `postinstall` script [1]. After this
  step, the Podfile.lock file is much changed, as expected. There is
  also a change in the project.pbxproj file.

- Update .flowconfig with the new Flow version, and address one new
  warning by removing a `$FlowFixMe` that we shouldn't have needed
  in the first place. (Usually this part is much more complicated!)

- Update "jest-expo" in package.json, to oblige a peer-dependency
  constraint on "react".

- Make a change to the Podfile, according to
  facebook/react-native@a35efb940.

  - Instead of spelling out all the Pods from RN (all the
    non-Flipper-related Pods, that is -- we'll handle the Flipper
    ones in a later commit), call a function defined by React
    Native, `use_react_native!`, newly exposed in RN v0.63.

  - Since we're still using React-RCTPushNotification (pending the
    resolution of zulip#4163), take care to keep
    React-RCTPushNotification. It apparently hasn't yet been removed
    from React Native, but it understandably isn't handled by
    `use_react_native!`.

See the PR thread [2] for the list of RN commits affecting the
template app and how we've chosen to propagate the template-app
changes into our project.

See also the RN v0.62 -> v0.63 upgrade guide [3], which gives a
visual representation of the changes to the template app. It mostly
matches the changes we've made; important deviations should have
been explained in the commit list in the PR thread [4].

We know of one bug that's directly solved by taking this upgrade:
issue zulip#4365. I've just tested, and I do indeed start to see avatars
on a simulator running iOS 14, where I didn't see them before.

[1] See
    zulip#4420 (comment)
    for more details on this.

[2] zulip#4420 (comment)

[3] https://react-native-community.github.io/upgrade-helper/?from=0.62.2&to=0.63.4

[4] As always, the guide does show some changes that don't appear in
    the template app. I think this noise is an effect of how the
    guide is generated (with react-native-community/rn-diff-purge)
    and can safely be ignored. It's a diff between a fresh app
    created with `react-native init --version=$CURRENT` and a fresh
    app created with `react-native init --version=$NEXT`, for the
    selected values of `$CURRENT` and `$NEXT`. In particular:

    - I believe that some dependency version range changes in
      package.json, including for @babel/core and @babel/runtime,
      might be caused by different versions for those dependencies
      being available when the `react-native init` commands are run.

    - Some changes in ordering and unique ID values always seem to
      show up in the project.pbxproj file.

Fixes: zulip#4245
Fixes: zulip#4365
@chrisbobbe chrisbobbe marked this pull request as ready for review January 21, 2021 23:57
@chrisbobbe
Copy link
Contributor Author

chrisbobbe commented Jan 21, 2021

All looks good, thanks! And that sounds like a good plan.

Great, thanks; I've just added a commit that points to the PR commit on react-native-cameraroll/react-native-cameraroll#264. I suppose it would be slightly neater to have this commit live on a branch owned by zulip instead of chrisbobbe, but I don't have the permissions to fork to zulip.

I've also unmarked the PR as a draft, and marked the upgrade commit as fixing #4365, after testing and confirming that it does in fact fix it, as expected.

@chrisbobbe chrisbobbe changed the title Draft: Upgrade to React Native v63. Upgrade to React Native v63. Jan 22, 2021
We should be passing a `React$ElementRef` type as a type argument to
`React.createRef`; see
zulip#4278 (comment).
As noted in the code comments, one mistake we were making (not seen
until now) was passing the wrong type parameter to `React$Ref`; we
should be passing a `React$ElementRef` type [1].

When we do that, the existing `$FlowFixMe`s (the ones with comments
about RN v0.63) are marked as unused, as we'd expect. But
unfortunately, at that point, `.current` is typed as
`any(implicit)`, which we definitely don't want. And that doesn't
seem to get fixed by upgrading to RN v0.63, so, remove the comments
about that new version. Greg suggests this may be caused by bugs in
Flow's special support for React [2].

So, mention our new knowledge that we need to be using
`React$ElementRef`, but retain some fixmes and comments alerting us
to the fact that `.current` is untyped and that we need to be
careful about using it.

[1] zulip#4278 (comment)
[2] zulip#4420 (comment)
As Greg suggests [1], point to the commit at the tip of my PR
react-native-cameraroll/react-native-cameraroll#264.

Once a version of @react-native-community/cameraroll with official
RN v0.63 support (including as declared in `peerDependencies`) is
released to NPM, we should go back to specifying a version range,
making sure that that range doesn't include versions before that
update.

We expect this will happen relatively soon; the project does seem to
be actively merging PRs, and I recently left a ping on the issue.
But we'd like to start using RN v0.63 in our project ASAP, so we use
this strategy in the meantime.

Sometimes packages have a crucial build/packaging step that gets
done as part of releasing a version to NPM. Such a step would likely
make it impossible to point to a commit on GitHub and have the
package still work. But I've verified that it does indeed work when
we point to the commit on GitHub, so there's no problem there.

[1] zulip#4420 (comment)
In this commit:

- Update "react-native", "react", and "flow-bin" in package.json.
  Run `pod update Folly --no-repo-update` to move past an error on
  the `pod install` step of the `postinstall` script [1]. After this
  step, the Podfile.lock file is much changed, as expected. There is
  also a change in the project.pbxproj file.

- Update .flowconfig with the new Flow version, and address one new
  warning by removing a `$FlowFixMe` that we shouldn't have needed
  in the first place. (Usually this part is much more complicated!)

- Update "jest-expo" in package.json, to oblige a peer-dependency
  constraint on "react".

- Make a change to the Podfile, according to
  facebook/react-native@a35efb940.

  - Instead of spelling out all the Pods from RN (all the
    non-Flipper-related Pods, that is -- we'll handle the Flipper
    ones in a later commit), call a function defined by React
    Native, `use_react_native!`, newly exposed in RN v0.63.

  - Since we're still using React-RCTPushNotification (pending the
    resolution of zulip#4163), take care to keep
    React-RCTPushNotification. It apparently hasn't yet been removed
    from React Native, but it understandably isn't handled by
    `use_react_native!`.

See the PR thread [2] for the list of RN commits affecting the
template app and how we've chosen to propagate the template-app
changes into our project.

See also the RN v0.62 -> v0.63 upgrade guide [3], which gives a
visual representation of the changes to the template app. It mostly
matches the changes we've made; important deviations should have
been explained in the commit list in the PR thread [4].

We know of one bug that's directly solved by taking this upgrade:
issue zulip#4365. I've just tested, and I do indeed start to see avatars
on a simulator running iOS 14, where I didn't see them before.

[1] See
    zulip#4420 (comment)
    for more details on this.

[2] zulip#4420 (comment)

[3] https://react-native-community.github.io/upgrade-helper/?from=0.62.2&to=0.63.4

[4] As always, the guide does show some changes that don't appear in
    the template app. I think this noise is an effect of how the
    guide is generated (with react-native-community/rn-diff-purge)
    and can safely be ignored. It's a diff between a fresh app
    created with `react-native init --version=$CURRENT` and a fresh
    app created with `react-native init --version=$NEXT`, for the
    selected values of `$CURRENT` and `$NEXT`. In particular:

    - I believe that some dependency version range changes in
      package.json, including for @babel/core and @babel/runtime,
      might be caused by different versions for those dependencies
      being available when the `react-native init` commands are run.

    - Some changes in ordering and unique ID values always seem to
      show up in the project.pbxproj file.

Fixes: zulip#4245
Fixes: zulip#4365
Instead of spelling out the exact same code ourselves.

Corresponds to the portion of facebook/react-native@619d5d60d that
was missing in its backport to RN v0.62
(facebook/react-native@b4d1fcfb2); we took all of that incomplete
backport in 9a144c5.

After aligning our Podfile code with the corresponding code in the
RN v0.63 script, in zulip#4322, this change can be done as an NFC commit
after the RN v0.63 upgrade commit.
These obviously didn't get fixed in the RN v0.63 upgrade, as we'd
thought they would...

It turns out that it's a very similar bug [1] to the one we
originally thought it was [2], but slightly different.
`UserPresence` is an object type with an indexer *and* an additional
property.

[1] facebook/flow#8276
[2] facebook/flow#8178
@gnprice
Copy link
Member

gnprice commented Jan 22, 2021

Looks great -- merged!

I suppose it would be slightly neater to have this commit live on a branch owned by zulip instead of chrisbobbe

I think that would definitely be better if we found ourselves maintaining a fork of that repo, with ongoing changes. (As we did for remotedev-serialize, starting at 9d0aa95, before we ended up inlining that code and integrating it more closely into the main mobile repo.)

But when the intent really is "just this one PR, until it's hopefully merged soon", I think pointing straight to the branch the PR was sent from fits pretty well. If in a few months we notice that it's still there and the PR isn't merged, and there's some other maintenance it needs, we might end up moving to the fork model; but hopefully we'll instead get to just switch back to pointing upstream, and then get to forget about this package's maintenance again for a while.

@chrisbobbe
Copy link
Contributor Author

Great, thanks! 🙂

But when the intent really is "just this one PR, until it's hopefully merged soon", I think pointing straight to the branch the PR was sent from fits pretty well.

Makes sense. I've just opened #4425 so we don't totally forget to switch back to a published version on NPM.

Gautam-Arora24 pushed a commit to Gautam-Arora24/zulip-mobile that referenced this pull request Feb 2, 2021
As noted in the code comments, one mistake we were making (not seen
until now) was passing the wrong type parameter to `React$Ref`; we
should be passing a `React$ElementRef` type [1].

When we do that, the existing `$FlowFixMe`s (the ones with comments
about RN v0.63) are marked as unused, as we'd expect. But
unfortunately, at that point, `.current` is typed as
`any(implicit)`, which we definitely don't want. And that doesn't
seem to get fixed by upgrading to RN v0.63, so, remove the comments
about that new version. Greg suggests this may be caused by bugs in
Flow's special support for React [2].

So, mention our new knowledge that we need to be using
`React$ElementRef`, but retain some fixmes and comments alerting us
to the fact that `.current` is untyped and that we need to be
careful about using it.

[1] zulip#4278 (comment)
[2] zulip#4420 (comment)
Gautam-Arora24 pushed a commit to Gautam-Arora24/zulip-mobile that referenced this pull request Feb 2, 2021
As Greg suggests [1], point to the commit at the tip of my PR
react-native-cameraroll/react-native-cameraroll#264.

Once a version of @react-native-community/cameraroll with official
RN v0.63 support (including as declared in `peerDependencies`) is
released to NPM, we should go back to specifying a version range,
making sure that that range doesn't include versions before that
update.

We expect this will happen relatively soon; the project does seem to
be actively merging PRs, and I recently left a ping on the issue.
But we'd like to start using RN v0.63 in our project ASAP, so we use
this strategy in the meantime.

Sometimes packages have a crucial build/packaging step that gets
done as part of releasing a version to NPM. Such a step would likely
make it impossible to point to a commit on GitHub and have the
package still work. But I've verified that it does indeed work when
we point to the commit on GitHub, so there's no problem there.

[1] zulip#4420 (comment)
Gautam-Arora24 pushed a commit to Gautam-Arora24/zulip-mobile that referenced this pull request Feb 2, 2021
In this commit:

- Update "react-native", "react", and "flow-bin" in package.json.
  Run `pod update Folly --no-repo-update` to move past an error on
  the `pod install` step of the `postinstall` script [1]. After this
  step, the Podfile.lock file is much changed, as expected. There is
  also a change in the project.pbxproj file.

- Update .flowconfig with the new Flow version, and address one new
  warning by removing a `$FlowFixMe` that we shouldn't have needed
  in the first place. (Usually this part is much more complicated!)

- Update "jest-expo" in package.json, to oblige a peer-dependency
  constraint on "react".

- Make a change to the Podfile, according to
  facebook/react-native@a35efb940.

  - Instead of spelling out all the Pods from RN (all the
    non-Flipper-related Pods, that is -- we'll handle the Flipper
    ones in a later commit), call a function defined by React
    Native, `use_react_native!`, newly exposed in RN v0.63.

  - Since we're still using React-RCTPushNotification (pending the
    resolution of zulip#4163), take care to keep
    React-RCTPushNotification. It apparently hasn't yet been removed
    from React Native, but it understandably isn't handled by
    `use_react_native!`.

See the PR thread [2] for the list of RN commits affecting the
template app and how we've chosen to propagate the template-app
changes into our project.

See also the RN v0.62 -> v0.63 upgrade guide [3], which gives a
visual representation of the changes to the template app. It mostly
matches the changes we've made; important deviations should have
been explained in the commit list in the PR thread [4].

We know of one bug that's directly solved by taking this upgrade:
issue zulip#4365. I've just tested, and I do indeed start to see avatars
on a simulator running iOS 14, where I didn't see them before.

[1] See
    zulip#4420 (comment)
    for more details on this.

[2] zulip#4420 (comment)

[3] https://react-native-community.github.io/upgrade-helper/?from=0.62.2&to=0.63.4

[4] As always, the guide does show some changes that don't appear in
    the template app. I think this noise is an effect of how the
    guide is generated (with react-native-community/rn-diff-purge)
    and can safely be ignored. It's a diff between a fresh app
    created with `react-native init --version=$CURRENT` and a fresh
    app created with `react-native init --version=$NEXT`, for the
    selected values of `$CURRENT` and `$NEXT`. In particular:

    - I believe that some dependency version range changes in
      package.json, including for @babel/core and @babel/runtime,
      might be caused by different versions for those dependencies
      being available when the `react-native init` commands are run.

    - Some changes in ordering and unique ID values always seem to
      show up in the project.pbxproj file.

Fixes: zulip#4245
Fixes: zulip#4365
@chrisbobbe chrisbobbe mentioned this pull request Sep 8, 2021
@chrisbobbe chrisbobbe deleted the pr-rn-63 branch September 11, 2021 00:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Avatars don't work on iOS 14, except in message list Upgrade to RN v0.63
2 participants